<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>广告编辑</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
	<style type="text/css">
		.layui-form {
			padding: 20px;
		}

		.layui-form-item {
			width: 33.333%;
			float: left;
			margin-right: 0;
		}

		@media (max-width: 1240px) {
			.layui-form-item .layui-inline {
				width: 100%;
				float: none;
			}
		}
	</style>
</head>
<body class="childrenBody">
	<form class="layui-form" action="" style="margin: 20px;">
		<div class="item-price">
			<ul>
				<li style="margin: 20px 0;list-style-type:none;display:block;width:100%;height:200px;">
					<p style="width: 80px;float: left;">轮播图片：</p>
					<div style="width: 200px;float: left;border: 1px solid #e5e5e5;border-radius: 5px;height: 200px;">
						<input type="hidden" name="id">
						<input type="hidden" name="imgUrl">
						<img src="" style="width: 200px;height: 200px;" alt="" id="imgUrl">
					</div>
					<div style="margin: 0 20px;float: left;">
						<button type="button" class="layui-btn" id="bannerImgBut">
							<i class="layui-icon">&#xe67c;</i>上传图片
						</button>
					</div>
				</li>

				<li  style="margin: 20px 0;list-style-type:none;display:block;width:100%;height:200px;">
					<p style="width: 80px;float: left;text-align:center;line-height:40px;">链接地址：</p>
					<div style="width: 500px;float: left;">
						<input name="bannerUrl" type="text" placeholder="请输入链接地址" class="layui-input">
					</div>
				</li>
				<li  style="margin: 20px 0;list-style-type:none;display:block;width:100%;height:200px;">
					<button class="layui-btn" lay-submit lay-filter="bannerForm">立即提交</button>
				</li>
			</ul>
		</div>
	</form>
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<!-- 	<script type="text/javascript" src="/js/user/newsAdd.js"></script> -->

<script type="text/javascript">
    layui.config({
        base: "/js/admin/"
    }).extend({
        $tool: 'tool'
    }).use(['form', 'layer', 'jquery', 'layedit', 'laydate', '$tool','upload'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            upload = layui.upload,
            $ = layui.jquery;
        $tool = layui.$tool;
        var queryArgs = $tool.getQueryParam();//获取查询参数
        var id = queryArgs['id'];
        $("input[name='id']").val(id);
        $.ajax({
            type : "GET",
            url: '/banners/showBanner/'+id,
            dataType:'json',
            async:false,
            success: function(obj){
                $('#imgUrl').attr('src', obj.data.imgUrl); //图片链接（base64）
                $("input[name='imgUrl']").val(obj.data.imgUrl);
                $("input[name='bannerUrl']").val(obj.data.bannerUrl);
            }
        });
        var uploadInst2 = upload.render({
            elem: '#bannerImgBut'
            ,url: '/banners/upload/'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#imgUrl').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code==2000){
                    //上传成功
                    layer.msg('上传成功');
                    $("input[name='imgUrl']").val(res.data);
                } else{
                    return   layer.msg('上传失败');
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        //创建一个编辑器
        form.on("submit(bannerForm)", function (data) {
            var datas = data.field;
            var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            $.ajax({
                type: "POST",
                url: "/banners/edit",
                data: JSON.stringify(datas),// 序列化表单值
                contentType: "application/json",
                success: function (data) {
                    if (data.code == 2000) {
                        top.layer.close(index);
                        top.layer.msg("修改成功！");
                        top.layer.closeAll("iframe");
                        parent.location.reload();
                    } else {
                        top.layer.close(index);
                        top.layer.msg(data.msg);
                    }
                },
                error: function (request) {
                    alert("Connection error");
                }
            });
            return false;
        })
    });

</script>
</body>
</html>

